<template>
	<view class="calendar-top">
		<view class="calendar-top-box">
			<view class="swiper-calendar-wrp">
				<scroll-view class="calendar-wrp" id="the-id" :scroll-into-view="scrollViewId" lower-threshold="50" :scroll-left="scrollLeft"
				 scroll-with-animation="true" scroll-x="true" upper-threshold="50">
					<view @click="calendarItemTap(item,index)" :id="'cal'+index" :class="'calendar-wrp-item '+[item.active?'calendar-active ':'']+[item.disabled?'calendar-disabled ':'']"
					 v-for="(item,index) in swiperDates" :key="index">
						<view class="item-wrp">					
							<view class="week fw-bold">{{item.week}}</view>
							<view class="date">{{item.monthDay}}</view>
<!-- 							<view v-if="" v-for="(day,indexd) in dateList" :key="indexd" class="price" >
								{{item.date == day.date && day.price ?'¥'+formatNumber(day.price): '--' }} 
							</view> -->
							<view class="price">
								{{item.price ?'¥'+formatNumber(item.price): '--' }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view @click="allCalendarTap" class="calendar-link fw-bold">
				<text>更多</text>
				<text class="iconfont icon-ic_right"></text>
			</view>
		</view>

	</view>

</template>

<script>
	import util from '@/utils/util.js';
	var _getDiffDate = util.getDiffDate;
	var _addDay = util.addDay;
	var _dateDiff = util.dateDiff;
	var _parseDate = util.parseDate;
	var _formatDate = util.formatDate
	export default {
		props: {
			saleDate: {
				type: String,

			},
			dptDate: {
				type: String,

			},
			dateList: {
				type: Array,
		        default: []
			},
			tempDateObj: {
				type: Object,
			
			},
		},
		data() {
			return {
				swiperDates: [],
				scrollLeft: 0,
				swiperItemWidth: 65,
				scrollViewId: ''
			};
		},
		watch: {
		
			
			tempDateObj:{
				handler(nVal,oVal){
					if(nVal)this.changeDate(nVal)
				},
				immediate: true,
				deep:true
			}
		},
		mounted() {
			this.getSaleDaysDate(this.saleDate);
			// this.swiperCalendarDates();
		},
		methods: {
			formatNumber(num) {
			    // 将数字转换为字符串，并检查小数点后两位  
			    const strNum = Number(num).toFixed(2); // 这将总是返回两位小数，即使它们是0  
			    const decimalPart = strNum.split('.')[1]; // 获取小数点后的部分  
			  
			    // 如果小数点后两位是00，则去掉这两位小数  
			    if (decimalPart === '00') {  
			        return strNum.split('.')[0]; // 返回整数部分  
			    } else {  
			        return strNum; // 否则返回原始的两位小数形式  
			    }  
			},  
			changeDate(){
				var that = this;
				const hasLargeNumber = this.swiperDates.some(function(element) {  
				  return that.tempDateObj.date == element.date;  
				}); 

				// 如果所选日期已经存在
				if(hasLargeNumber){
					 for(var i = 0;i < this.swiperDates.length; i++){
						if(this.tempDateObj.date ==  this.swiperDates[i].date){
							this.swiperDates[i].active = true;
							this.setScrollLeft(i)
						} else {
							this.swiperDates[i].active = false;
						}
					 } 
				} else if(that.tempDateObj && that.tempDateObj.date)  {
					this.swiperDates.forEach(el => {  
					  el.active = false; 
					});  
					this.swiperDates.unshift({
						date: that.tempDateObj.date,
						price: that.tempDateObj.adult_price,
						active: true,
						monthDay: _formatDate(_parseDate(that.tempDateObj.date), "MM-dd"),
						week: _dateDiff(that.tempDateObj.date).replace("星期", "周"),
					})
					this.setScrollLeft(0)
				}
				
			},
			getSaleDaysDate: function(e) {
				
				var that = this,
					u = _getDiffDate(_formatDate("yyyy-MM-dd"), e).length,
					s = _getDiffDate(_formatDate("yyyy-MM-dd"), e),
					o = 0,
					d = [];
				// 预售日期不足六天 补足
				if (u < 6) {
					o = 6 - u;
					var f = _addDay(o, e).day,
						c = _addDay(1, e).day,
						D = _getDiffDate(c, f) || [];
					s = [].concat(s, D);
				}
				s.map(function(e, t) {
					
					var i = _dateDiff(e).replace("星期", "周"),
						r = {
							date: e,
							monthDay: _formatDate(_parseDate(e), "MM-dd"),
							week: i,
							disabled: !1,
							active: !1
						};
					o > 0 && t >= u && (r.disabled = !0), d.push(r);
				})
				
				if(this.dateList.length){
					for(var i = 0;i < this.dateList.length; i++){
						for(var j = 0;j < d.length; j++){
							if(this.dateList[i].date == d[j].date){
								d[j].price = this.dateList[i].adult_price;
							} 
						}
					}
				}
				that.swiperDates = d
				
				// console.log('that.swiperDates',that.swiperDates)
				try {
					that.getNodesFields(0);
				} catch (e) {
					console.log("TCL: getNodesFields -> error", e);
				}

				that.swiperCalendarDates(that.dptDate);


			},
			getNodesFields: function() {
				var e = this,
					t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
					a = arguments.length > 1 ? arguments[1] : void 0;
				uni.createSelectorQuery().select("#cal".concat(t)).fields({
					dataset: !0,
					size: !0,
					context: !0
				}, function(t) {
					if (t) {
						var i = t.width;
						e.swiperItemWidth = i || 55
					}
					a && "function" == typeof a && a(t);
				}).exec();
			},
			swiperCalendarDates: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
					t = arguments.length > 1 ? arguments[1] : void 0,
					a = this,
					i = 0,
					r = a.dptDate || "";
					
				a.swiperDates.map(function(t, a) {
						t.active = !1, t.date != e && a != e || (t.active = !0, i = a, r = t.date);
					}),
					
					this.setScrollLeft(i), t && "function" == typeof t && t({
						date: r,
						index: i
					});

			},
			setScrollLeft: function(e) {
				var t = this;
				// t.scrollLeft = t.swiperItemWidth * (e - 2) + 1
				t.scrollLeft = t.swiperItemWidth *e -1
			},
			calendarItemTap: function(e, index) {
				var t = this;	var a = index;	var r = this;
				if(!r.swiperDates[a].price){
					uni.showToast({
						title: '所选日期暂无排期',
						duration: 2000,
						icon:'error'
					})
					return;
				}
				r.swiperDates[a].disabled ? uni.showToast({
					title: '不在预售范围内',
					duration: 2000
				}) : r.swiperDates[a].active || this.swiperCalendarDates(a, function(e) {
					var a = e.date || r.dptDate;
					// t.triggerEvent("handlerCalendar", {
					// 	currentDate: a
					// });
					t.$emit("handlerCalendar", {
						currentDate: a
					});
				});
			},
			allCalendarTap: function() {
				this.$emit("handlerAllCalendar");
			},
		}
	}
</script>


<style>
/* 	page {
		background-color: #ddd;
	} */

	.calendar-top {
		padding: 10rpx;
		background: #FFFFFF;
	}

	.calendar-top-box {
		display: flex;
		/* overflow: hidden; */
		border-radius: 5px;
	}

	.swiper-calendar-wrp {
		flex: 1;
		overflow: hidden;
		background: #FFFFFF;
		position: relative;
	}

	.swiper-calendar-wrp::before {
		/* content: " ";
		position: absolute;
		left: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #0c79ff; */
		/* box-shadow: 10rpx 0rpx 25rpx 10rpx #2e79df; */
	}

	.swiper-calendar-wrp::after {
		/* content: " ";
		position: absolute;
		right: -2rpx;
		top: 0;
		height: 100rpx;
		width: 1rpx;
		background: #0c79ff; */
		/* box-shadow: -2rpx 0rpx 30rpx 5rpx #0c79ff; */
	}

	.calendar-link {
		width: 96rpx;
		height: 150rpx;
		font-size: 24rpx;
		background: #FFFFFF;
		color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 15rpx 0; */
		/* flex-direction: column; */
		box-sizing: border-box;
	}
	.calendar-link::before {
		background: linear-gradient(90deg, hsla(0, 0%, 89%, 0), #cdd1de 99%);
		content: "";
		height: 150rpx;
		/* margin-top: 8px; */
		opacity: .6;
		position: absolute;
		right: 128rpx;
		width: 5px;
	}


	.calendar-link-arrow {
		width: 20rpx;
		height: 10rpx;
		margin-top: 5rpx;
	}

	.calendar-wrp {
		height: 160rpx;
		white-space: nowrap;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.calendar-wrp-item {
		width: 130rpx;
		/* height: 100rpx; */
		font-size: 24rpx;
		display: inline-block;
		text-align: center;
		position: relative;
		color: #000000;
		margin-right: 8px;
	}

	/* .calendar-wrp-item::after {
    content: " ";
    height: 80rpx;
    width: 0.5px;
    border-right: 1rpx #e5e5e5 solid;
    position: absolute;
    right: -1rpx;
    top: 8rpx;
} */

	.calendar-wrp-item:last-child::after {
		display: none;
	}

	.item-wrp {
		display: flex;
		height: 100%;
		flex-direction: column;
		box-sizing: border-box;
		color: rgb(51, 51, 51);
		border-radius: 8rpx;
		border-style: solid;
		border-width: 0.05rem;
		border-color: rgb(238, 241, 246);
		background-color: rgb(246, 248, 250)
	}
	.price {
		white-space: nowrap;
		font-size: 15px;
		max-width: 70px;
		position: relative;
		padding: 5px 0;
		color: #f50; 
		font-family: "20th_bold";
		font-weight: 700;
	}

	.calendar-wrp-item .date {
		padding-top: 5px;
		font-size: 15px;
		color: #111;
		font-family: "20th_bold";
		font-weight: 700;
	}

	.calendar-wrp-item .week {
		padding-top: 5rpx;
		font-size: 28rpx;
		color: #111;
	}

	.calendar-active .item-wrp {
		/* background: #007AFF; */
		/* background-image: linear-gradient(to right, #0c8eff, #007AFF); */
		border-style: solid;
		border-width: 1px;
		border-color: var(--view-theme);
		background-color: rgb(242, 248, 254);
		/* color: #FFFFFF; */
		border-radius: 8rpx;
	}

	.calendar-active::after {
		display: none;
	}

	.calendar-disabled .item-wrp {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 8rpx;
		color: #dadde0;
	}

	.line-type__hover {
		border-color: #186ee7;
		background: #f5f5f5;
	}

	.calendar-chartered-top {
		background-color: #fff;
		padding: 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp {
		background-color: #fff;
	}

	.calendar-chartered-top .item-wrp {
		color: #333333;
	}

	.calendar-chartered-top .calendar-wrp-item::after {
		border-right: 1rpx #DEE4E7 solid;
	}

	.calendar-chartered-top .calendar-link {
		color: #333333;
		background-color: #fff;
		padding: 10rpx 0;
	}

	.calendar-chartered-top .swiper-calendar-wrp::before {
		box-shadow: 10rpx 0rpx 25rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .swiper-calendar-wrp::after {
		box-shadow: 2rpx 0rpx 30rpx 10rpx #DEE4E7;
		background-color: #DEE4E7;
	}

	.calendar-chartered-top .calendar-active .item-wrp {
		background: #5F9DF1;
		color: #fff;
	}

	.calendar-chartered-top .calendar-wrp-item .date,
	.calendar-chartered-top .calendar-wrp-item .week {
		font-size: 26rpx;
	}

	.animate {
		z-index: 9999;
		animation: mymove 1s linear;
		animation-delay: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@-webkit-keyframes mymove {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>
